<template>
  <div class="myRegister">
    <p>注册新用户</p>

    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="昵称" prop="username">
        <el-input
          v-model="ruleForm.username"
          @blur="checkusername"
        ></el-input>{{  mes_username }}
      </el-form-item>

      

      <el-form-item label="邮件" prop="email">
        <el-input
          v-model="ruleForm.email"
          @blur="checkEmail_"
        ></el-input>{{ mes_email }}
      </el-form-item>

      <el-form-item label="验证码" prop="myConde">
        <el-input
          v-model="myConde"
        ></el-input>
        <!-- <el-button @click="getCode">获取验证码</el-button> -->
        <input type="button" @click="getCode" value="获取验证码">
        {{ mes_myConde }}
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkpassword"
          autocomplete="off"
        ></el-input>
      </el-form-item> -->

      <el-form-item label="地址" prop="address">
        <el-input v-model.number="ruleForm.address"></el-input>
      </el-form-item>

      <div class="myel-upload">
        头像
        <!-- action= "http://localhost:8888/common/upload" -->
        <!-- :action= `process.env.development.VUE_APP_BASE_API` +`/common/upload` -->
        <el-upload
          class="avatar-uploader"
          
          :action= "baseURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <br />

      <el-form-item>
        <el-button
          type="primary"
          @click="checkmyConde"
          v-if=" isusername && isemail"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import myhomeapi from "@/api/myhome";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: "",
        // checkpassword: "",
        email: "",
        username: "",
        address: "", //地址
        avatar: "", //头像
      },

      isemail: false,
      isusername: false,
      mes_email:'',
      mes_username:'',
      myConde:'',//验证码
      mes_myConde:'',
      baseURL: process.env.VUE_APP_BASE_API +"/common/upload",

      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    //检查邮箱是否被注册
    checkEmail_() {
      myhomeapi
        .checkemail(this.ruleForm.email)
        .then((res) => {
          //成功后
          this.isemail = true;
          this.mes_email=''
        })
        .catch((error) => {
          this.isemail = false;
          this.mes_email='邮件已存在'
        });
    },
    //检查用户名
    checkusername() {
      // alert("检查用户名")
      myhomeapi
        .checkusername(this.ruleForm.username)
        .then((res) => {
          this.isusername = true;
          this.mes_username=''
        })
        .catch((error) => {
          this.isusername = false;
          this.mes_username='昵称已存在'
        });
    },

    //获取验证码
    getCode(){
      myhomeapi.getCode(this.ruleForm.email).then(res=>{
        this.mes_myConde='验证码发送成功！5分钟内有效'
      }).catch(error=>{
        this.mes_myConde='验证码发送失败！'
      })

    },
        //验证验证码和登录
    checkmyConde(){
      myhomeapi.checkmyConde(this.ruleForm.email,this.myConde)
      .then(res=>{
        //成功 提交注册
        myhomeapi.myregister(this.ruleForm).then(res=>{
            this.$router.push('/login')
        })

      }).catch(error=>{
        this.mes_myConde="验证码错误"
      })

    },
    // //===========注册按钮============
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //上传头像成功后
    handleAvatarSuccess(res) {
      //http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      // res.message
      console.log("====================");
      var url = res.message;
      this.ruleForm.avatar =
        process.env.VUE_APP_BASE_API + "/common/download/" + url;
      // http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      console.log(this.ruleForm.avatar);
      this.$forceUpdate(); // 触发强制刷新
    },
  },
};
</script>

<style scoped>
.myel-upload {
  text-align: left;
  font-size: 20px;
}
.myRegister {
  width: 400px;
  margin-left: 30%;
  text-align: center;
  font-size: 30px;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  /* background-color: rgb(12, 170, 237); */
  border: 5px solid gray;
  font-size: 25px;
  margin-left: 100px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>